var createFrom="#createGroupForm";
var updateForm="#updateGroupForm";
var createValidation=null;
var indexListURL="/group/list";
var URI_DEL="/group/delete/";
var groupVUE=null;
$(function(){
    groupVUE = new Vue({
        el: '#groupPanel',
        data: {
            groups:[],
            joinGroups:[]
        },
        methods:{
            editGroup:function(id){
                updateAction(id)
            },
            openGroup:function(id){
                window.location.href="/group/"+id+".html";
            },
            delGroup:function(id){
                delAction(id);
            }
        },
        created:function(){
            var _this = this;
            $.getJSON(indexListURL,{"type":1},function(resp){
                if (resp.code != "0000") {
                    showMessage(resp.code || resp.desc, "error");
                } else {
                    _this.groups=resp.data.mine;
                    _this.joinGroups=resp.data.joins;
                }
            })
        }
    });
})


function initValidate(formId) {
    var validator = $(formId).validate({
        rules: {
            groupName: {required: true, maxlength: 100},
            groupDesc: {required: true, maxlength: 100}
        }
    });
    return validator;
}
function createAction(){
    loadDialog("#AllModal", "新增", "/group/create.html", function () {
        createValidation = initValidate(createFrom)
        $(createFrom).ajaxForm({
            target: '#btn-Group-submit',   // target element(s) to be updated with server response
            dataType: 'json',
            url: "/group/create",
            beforeSubmit: function (formData, jqForm, options) {
                return createValidation.valid();
            },
            success: function (result, statusText, xhr, $form) {
                if (result.code != "0000") {
                    showMessage(result.code || result.desc, "error");
                } else {
                    $("#AllModal").modal("hide");
                    groupVUE.groups.push(result.data);
                }
            }
        });
    })
}

function updateAction(id){
    loadDialog("#AllModal", "修改", "/group/update/"+id+".html", function () {
        updateValidation = initValidate(updateForm)
        $(updateForm).ajaxForm({
            target: '#btn-Group-update',   // target element(s) to be updated with server response
            dataType: 'json',
            url: "/group/update/"+id,
            beforeSubmit: function (formData, jqForm, options) {
                return updateValidation.valid();
            },
            success: function (result, statusText, xhr, $form) {
                if (result.code != "0000") {
                    showMessage(result.code || result.desc, "error");
                } else {
                    $("#AllModal").modal("hide");
                    for(var i=0;i<groupVUE.groups.length;i++){
                        if(groupVUE.groups[i].groupId == id){
                            groupVUE.groups.splice(i,1,result.data);
                            break;
                        }
                    }
                    showMessage(result.desc)
                }
            }
        });
    })
}

function delAction(id){
    var deleteDialog = $.confirm({
        type: 'red',
        animationSpeed: 300,
        title: false,
        content: '确认删除该记录吗？',
        buttons: {
            confirm: {
                text: '确认',
                btnClass: 'waves-effect waves-button',
                action: function () {
                    $.ajax({
                        type: 'post',
                        url: URI_DEL + id,
                        success: function (result) {
                            if (result.code != "0000") {
                                showMessage(result.code || result.desc, "error");
                            } else {
                                deleteDialog.close();
                                showMessage("删除成功");
                                for(var i=0;i<groupVUE.groups.length;i++){
                                    if(groupVUE.groups[i].groupId == id){
                                        groupVUE.groups.splice(i,1)
                                        break;
                                    }
                                }
                            }
                        }
                    });
                }
            },
            cancel: {
                text: '取消',
                btnClass: 'waves-effect waves-button'
            }
        }
    });
}

function loadDialog(selectEL, title, loadURI, success) {
    $(selectEL).find(".modal-title").html(title);
    $(selectEL).find('.modal-body').load(loadURI, function (response, status, xhr) {
        $(selectEL).modal("show");
        success();
    });
}